*{
    margin: 0;
    padding: 0;
}

html,body{
    height: 100%;
    background: linear-gradient(45deg , rgb(255, 188, 143) , rgb(223, 154, 255));
}

body{
    transition: 2s;
}

*::selection{
    appearance: none;
}

::-webkit-scrollbar{
    appearance: none;
    display: none;
}

@font-face {
    font-family: gamefont;
    src: url(../fonts/gamefont.ttf);
}

@font-face {
    font-family: ttx;
    src: url(../fonts/yuansheng.ttf);
}

@keyframes getInPage{
    0%{opacity: 0;top: 90%;}
    25%{opacity: 0.5;top: 70%;}
    50%{opacity: 1;top: 50%;}
    100%{top: 30%;}
}

@keyframes fadeIn {
    0%{opacity: 0;}
    80%{opacity: 1;}
    100%{opacity: 0;}
}

.hide{
    transition: 2s;
    opacity: 0;
}
.appear{
    transition: 2s;
    opacity: 1;
}

.d3f{
    font-size: 5em;
    color: #333;
    transform: perspective(6em) rotateX(-30deg) rotateY(-30deg);
    transform-style: preserve-3d;
    text-align: center;
    margin: 0;
    position: absolute;
    transform-origin: center bottom 2s;
    text-shadow: white 10px 10px 10px;
    font-family: ttx;
}

button{
    display: block;
    position: relative;
    left: 10%;
    width: 25em;
    height: 18em;
    border: 10px solid cadetblue;
    border-radius: 5px;
    text-shadow: 10px 10px 10px gold;
    transition: 300ms ease;
    font-size: larger;
    z-index: 2;
}
button:hover{
    box-shadow: 50px 50px 50px 0px white;
}
button:active{
    width: 21em;
    height: 15.12em;
    left: calc(10% + 2em);
}